import {Component, ElementRef, EventEmitter, Inject, OnInit, Output, Renderer2} from '@angular/core';
import {BaseComponent} from '../../entity/base-component';
import {BaseMapComponent} from '../../base-map/base-map.component';

@Component({
    selector: 'sb-layer-change',
    templateUrl: './layer-change.component.html',
    styleUrls: ['./layer-change.component.less'],
})
export class LayerChangeComponent implements OnInit, BaseComponent {

    current = 'dz';
    @Output()
    closeEvent = new EventEmitter<any>();

    constructor(private elementRef: ElementRef,
                private renderer2: Renderer2,
                @Inject(BaseMapComponent) public readonly baseMap?: BaseMapComponent) {
    }

    triggerClose() {
        this.closeEvent.emit();
    }


    ngOnInit() {
        this.changeToDzLayer();
    }

    changeToDzLayer() {
        this.current = 'dz';
        this.baseMap.map.showDzMap();
        this.domClick(this.elementRef.nativeElement.querySelector('.dz'));
    }

    changeToYxLayer() {
        this.current = 'yx';
        this.baseMap.map.showYxMap();
        this.domClick(this.elementRef.nativeElement.querySelector('.yx'));
    }

    private domClick(eventTarget: EventTarget) {
        if (eventTarget != null) {
            this.renderer2.appendChild(this.elementRef.nativeElement, eventTarget);
        }
    }
}
